<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Title</title>
    <script src="comm/js/vue2.0/vue.js"></script>
    <script src="comm/js/vue2.0/vue.plugin.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="comm/js/layer.m.js"></script>
</head>
<body>
<div id="app">
    <div class="main">
        <li v-for="x in list">
            <div>
                <a target="_blank" :href="x.url">{{x.title}}</a>
            </div>
            <div>
                <img :src="x.img">
            </div>
        </li>
    </div>
    <br>
    <h1>
        <span @click="pageData('-')">上一页</span>
        <span @click="pageData('+')">下一页</span>
    </h1>
</div>
<script type="text/javascript">
    vm = new Vue({
        el:'#app',
        data:{
            hello:'world',
            list:[],
            page:1
        },
        methods:{
            pageData:function (t) {
                if(this.page == 1 && t == '-'){
                    layer.msg('到头了.别点了');
                    return false;
                }
                console.log(this.page);
                if(t == '+'){
                    this.page++;
                }else{
                    this.page--;
                }
                this.getData();
            },
            getData:function () {
                var that = this;
                $.get('http://demo.he29.com/list?page='+this.page, function(data) {
                    that.list = data;
                });
            }
        },
        created:function () {
            this.getData();
        }
    });
</script>
</body>
</html>